<template>
  <view class="self">
	<image class="logo" src="/static/home/logo.png" mode="widthFix"></image>
	<view class="flex-start" style="line-height: 60rpx;">
		<view class="statetext" @click="changeState(false)" :style="!state?'font-size:36rpx;font-weight:500;':''">密码登录<view :class="!state?'active state':'state'"></view></view>
		<view class="statetext" :style="state?'font-size:36rpx;font-weight:500;':''" @click="changeState(true)">验证码登录<view :class="state?'active state':'state'"></view></view>
	</view>
	<view class="box">
		<view class="flex-between line">
			<uni-icons style="width: 50rpx;" type="phone" size="18"></uni-icons>
			<input class="box-input" placeholder="输入手机号" v-model="business_mobile"/>
		</view>
		<view class="flex-between line" v-show="!state">
			<uni-icons style="width: 50rpx;" type="locked" size="18"></uni-icons>
		    <input class="box-input" placeholder="请输入密码"  :password="showPassword"  v-model="password"/>
			<uni-icons style="width: 50rpx;" :type="showPassword?'eye-slash':'eye-filled'" size="18" @click="changePassword"></uni-icons>
		</view>
		<view class="flex-between line" v-show="state">
			<image src="/static/svg/Shield.svg" style="width: 26rpx;margin-left: 6rpx;margin-right: 12rpx;" mode="widthFix"></image>
			<input type="number" class="box-input" placeholder="请输入验证码" v-model="verification_code" />
			<button v-if="!countdown" style="border-radius: 20rpx;height:80%;font-size:26rpx;color:#fff;background: rgba(230, 16, 16, 0.45);" @click="getVerificationCode">获取验证码</button>
			<text v-if="countdown" style="width: 200rpx;font-size: 13px;color:#999">已发送 ({{ countdown }}s)</text>
		</view>
	</view>
	<view class="flex-start" style="font-size: 24rpx;">
		<checkbox-group @change="checkboxChange">
			<checkbox value="cb" style="transform: translateY(-10rpx) scale(0.6);" :value="1" />
		</checkbox-group>
		同意<view class="text">《平台服务协议》</view>和<view class="text">《隐私政策》</view>
	</view>
	<button hover-class="button-hover" class="login" @click="gologin">登录</button>
  </view>
</template>
 
<script>

import { login, send_sms_code } from '@/utils/api.js'
export default {
  data() {
    return {
      countdown: 0,
      timer: null,
	  business_mobile: '13291282956',
	  verification_code: '',
	  password: '123456789',
	  showPassword: false,
	  state: false,
	  agree: false
    };
  },
  methods: {
    getVerificationCode() {
		if (!this.business_mobile) {
			uni.showToast({
				title: '请输入手机号！',
				icon: 'none'
			});
			return;
		}
      // 示例API调用，需要替换为实际的API地址和参数
	  send_sms_code({phone_number:this.business_mobile}).then(res=>{
		  if(res.code == 200){
			  uni.showToast({
			    title: '验证码已发送',
			    icon: 'success'
			  });
		  }else{
			  uni.showToast({
			    title: res.error,
			    icon: 'error'
			  });
		  }
	  })
    },
	isValidPhoneNumber(phoneNumber) {
	    return /^1\d{10}$/.test(phoneNumber);
	},
    startCountdown() {
      if (this.timer) return;
      this.countdown = 60; // 假设验证码有效期为60秒
      this.timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown -= 1;
        } else {
          clearInterval(this.timer);
          this.timer = null;
        }
      }, 1000);
    },
	gologin() {
		if(!this.agree){
			uni.showToast({
				title: '请同意《平台服务协议》和《隐私政策》',
				icon: 'none'
			});
			return;
		}
		if(!this.state){
			if (!this.business_mobile || !this.password) {
			    uni.showToast({
					title: '手机号和密码不能为空',
					icon: 'none'
				});
				return;
			}
		}else{
			if (!this.business_mobile || !this.verification_code) {
			    uni.showToast({
					title: '手机号和验证码不能为空',
					icon: 'none'
			    });
			    return;
			}
		}
		var data = {}    
		if(!this.state){
			data = {
				business_mobile: this.business_mobile,
				password: this.password
			}
			
		}else{
			data = {
				business_mobile: this.business_mobile,
				verification_code: this.verification_code
			}
		}
		login(data).then(res=>{
		  	if (res.code == 200) {
		  		uni.showToast({
		  			title: res.msg,
		  			icon: 'success'
		  		});

				const userInfo = res.data;
				uni.setStorage({
				  key: 'userInfo',
				  data: res.data,
				});
		  		uni.switchTab({url:"/pages/tabBar/index/index"})
		  	   // 登录成功后的操作，如保存token、跳转页面等
		  	} else {
		  		 uni.showToast({
		  		   title: res.msg,
		  		   icon: 'error'
		  		 });
		  	}
		})
	},
	changePassword() {
		this.showPassword = !this.showPassword;
	},
	changeState(value) {
		this.state = value;
	},
	checkboxChange: function (e) {
		if(e.detail.value.length>0){
			this.agree = true
		}else{
			this.agree = false
		}
	}
  },
  onLoad() {
	 //  uni.getSystemInfo({
	 //    success: (res) => {
		// 	console.log(res)
		// }
	 // })
	 
	 // const res = uni.getAppAuthorizeSetting();
	 // console.log(res)
  }
};
</script>
<style lang="scss" scoped>
.self{
	padding: 40rpx;
	background: linear-gradient(137.06deg, rgba(255, 0, 0, 0.4) 0%, rgba(250, 230, 230,0.4) 21.06%, rgb(255, 255, 255) 100%);
	.logo{
		width: 80%;
		margin: 50rpx 10% 80rpx;
	}
	.active{
		width: 100rpx;
		height: 14rpx;
		margin: -10rpx auto 0;
		background: #E61010;
		filter: blur(2px);
	}
	.statetext{
		font-size: 28rpx;
		padding: 10rpx 20rpx;
	}
	.state{
		color: rgba(56, 56, 56, 1);
	}
	.title{
		text-align: center;
		color: #175ead;
		font-size: 40rpx;
		font-weight: 700;
		font-family: SimSun;
		margin-bottom: 30rpx;
	}
	.box{
		height: 320rpx;
		margin-top: 10rpx;
		.box-input{
			flex: 1;
			height: 80rpx;
			padding-left: 10rpx;
		}
		.line{
			align-items: center;
			height: 80rpx;
			margin-top: 30rpx;
			background: #fff;
			padding-left: 20rpx;
			border-radius: 30rpx;
		}
    }
	.login{
		background: rgba(230, 16, 16, 0.55);
		height: 88rpx;
		line-height: 88rpx;
		color: #fff;
		border-radius: 40rpx;
		margin-top: 10rpx;
	}
	.changeState{
		font-size: 24rpx;
		text-align: center;
		padding-top: 16rpx;
		color: #8f9ba7;
	}
	.text{
		font-size: 24rpx;
		color: rgba(22, 93, 255, 1);
	}
}
	
</style>